<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闭包</title>
</head>
<body>
    
    <!-- 
        概念：一个函数对周围状态的引用捆绑在一起（函数包函数不是闭包，当内部函数引用了外部函数的值才会出现闭包），内层函数中访问到外层函数的作用域
        简单的理解： 闭包 = 内层函数 + 外层函数的变量        
     -->

     <!-- 
        闭包的作用：封闭数据，提供操作，外部也可以访问函数内部的变量，封装变量，收敛权限，防止变量被污染
        闭包的应用：实现数据的私有，不会被外部修改
        比如，我们要做个统计函数调用次数，函数调用一次，就++

      -->
     <script>
        // 闭包基本格式，外层,常见的闭包形式 外部可以访问使用 函数内部的变量
        function outer(){
            let i = 1
            function fn (){
                console.log(i);
            }
            return fn
        }
        const fun = outer()
        fun() // 1,获取到函数内部的变量

        // 不使用闭包进行记数
        // let count  = 1
        // function fun(){
        //     count++
        //     console.log(`函数被调用${count}次`);
        // }
        // fun() // 1
        // fun() // 2 
        // // 如果我进行了修改，那么这个数据将会被污染 
        // count = 1000
        // fun() // 1001
        // count 是全局变量，容易被修改，采用闭包形式就不会出现这种情况

        // 闭包
        function closer() {
            let count = 0
            function fn() {
                count ++
                console.log(`函数被调用${count}次`);
            }
            return fn
        }
        let fn = closer()
        fn()
        count = 1000 // 私有变量无法修改


     </script>
</body>
</html>